<template>
  <div>
    <div class="itemList">
      <div class="commontop">
        <div class="commontop-left">
          <el-input
            placeholder="项目名称、ID"
            v-model="pages.keyword"
            @change="INput"
            @clear="INput"
            @keyup.enter.native="goSearch()"
            clearable
            prefix-icon="el-icon-search"
          ></el-input>
          <el-button
            class="searchbgc"
            @click="goSearch"
            icon="iconfont icon-sousuo2"
            >搜索</el-button
          >
        </div>
        <div class="commontop-right">
          <el-button
            class="red"
            icon="iconfont icon-shanchu1"
            @click="deleteSelectItem()"
            >删除</el-button
          >
        </div>
      </div>
      <el-table
        v-loading="isLoading"
        element-loading-spinner="el-icon-loading"
        element-loading-text="玩命加载中"
        :data="tableData"
        @selection-change="handleSelectionChange"
        max-height="700"
        :header-cell-style="{ backgroundColor: '#3963fd', color: '#fff' }"
        style="width: 100%; margin-top: 20px"
      >
        <template slot="empty">
          <img src="@/assets/imgs/暂未数据.png" alt style="margin-top: 104px" />
          <p style="margin-top: 15px; margin-bottom: 104px">暂未有数据</p>
        </template>
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="title" label="项目名称">
          <template slot-scope="scope">
            <a
              @click="handleClick(scope.row)"
              style="color: blue; cursor: pointer"
              >{{ scope.row.title }}
            </a>
          </template>
        </el-table-column>

        <el-table-column prop="classify_template.title" label="匹配分类">
          <template slot-scope="scope">
            <div v-if="isSupertube == 1">
              <a
                :disabled="isDisabled"
                @click="mathandleClick(scope.row)"
                v-if="scope.row.classify_template == null"
                style="color: red; cursor: pointer"
                >选择匹配分类！！！
              </a>
              <a
                v-else
                @click="mathandleClick(scope.row)"
                style="color: blue; cursor: pointer"
                >{{ scope.row.classify_template.title }}
              </a>
            </div>
            <div v-else>
              <a v-if="scope.row.combination == null">选择匹配分类！！！ </a>
              <a v-else>{{ scope.row.combination.title }} </a>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="combination.title" label="匹配案卷模板组合">
          <template slot-scope="scope">
            <div v-if="isSupertube == 1">
              <a
                @click="mathandleClick2(scope.row)"
                v-if="scope.row.combination == null"
                style="color: red; cursor: pointer"
                >选择匹配案卷组合！！！
              </a>
              <a
                v-else
                @click="mathandleClick2(scope.row)"
                style="color: blue; cursor: pointer"
                >{{ scope.row.combination.title }}
              </a>
            </div>
            <div v-else>
              <a v-if="scope.row.combination == null"
                >选择匹配案卷组合！！！
              </a>
              <a v-else>{{ scope.row.combination.title }} </a>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="created_days"
          label="创建时间(天)"
          width="120"
        ></el-table-column>
        <!--    <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.value"></el-switch>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <el-button class="green" @click="showEdit(scope.row.id)" size="mini"
              ><i class="el-icon-edit"></i
            ></el-button>
            <el-button
              class="red"
              size="mini"
              @click.native.prevent="deleteRow(scope.row.id)"
              ><i class="el-icon-delete"></i
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current_page"
          :page-sizes="pageSizeArr"
          :page-size="pages.per_page"
          layout="total, sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
      <el-dialog
        :visible.sync="dialogVisible"
        style="margin-top: 18vh"
        width="30%"
      >
        <div class="dialogBox">
          <div class="title">请选择该项目的阶段进行编辑</div>
          <div class="select">
            <div class="person" @click="goFiling()">
              <div class="icon">
                <i class="iconfont icon-jiansuojieduan"></i>
              </div>
              <div class="name">立卷阶段</div>
            </div>
            <div class="company" @click="goOther">
              <div class="icon">
                <i class="iconfont icon-xiangmuliebiao"></i>
              </div>
              <div class="name">检索阶段</div>
            </div>
          </div>
        </div>
      </el-dialog>
      <el-dialog
        class="tab"
        title="编辑"
        width="30%"
        :visible.sync="dialogFormVisible"
      >
        <el-form :model="editForm" ref="editForm">
          <el-form-item label="项目名称" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入项目名称"
              v-model="editForm.title"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目代码" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入项目代码"
              v-model="editForm.document_number"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="editModify('editForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <el-dialog
        title="匹配案卷组合"
        :visible.sync="matdialogVisible2"
        width="30%"
      >
        <el-form :model="matform2" ref="matform2">
          <el-form-item label="案卷组合" :label-width="formLabelWidth">
            <el-select clearable 
              @change="getPreparationForm2"
              v-model="matform2.combination_id"
              placeholder="请选择案卷组合"
            >
              <el-option
                v-for="item in matoptions2"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="matdialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="SubmitBtn2('matform2')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <el-dialog
        title="匹配分类模板"
        :visible.sync="matdialogVisible"
        width="30%"
      >
        <el-form :model="matform" ref="matform">
          <el-form-item label="分类" :label-width="formLabelWidth">
            <el-select clearable 
              @change="getPreparationForm"
              v-model="matform.template_id"
              placeholder="请选择分类"
            >
              <el-option
                v-for="item in matoptions"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="matdialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="SubmitBtn('matform')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <el-dialog :visible.sync="ChoicedialogVisible" width="30%">
        <div class="dialogBox2">
          <div class="title">请选择是参建单位或项目分类</div>
          <div class="select">
            <div class="person" @click="goMatching()">
              <div class="icon">
                <i class="el-icon-folder"></i>
              </div>
              <div class="name">参建单位</div>
            </div>
            <div class="company" @click="goConstruction()">
              <div class="icon">
                <i class="el-icon-folder-opened"></i>
              </div>
              <div class="name">项目分类</div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
import {
  projects,
  seeProjects,
  editProjects,
  delProjects,
  delProjectsMore,
} from "../../api/project/index";
import {
  classifyTemplates,
  classTemplate,
  setProjectId,
  relateCombination,
  Getselects,
} from "../../api/Template/index";
import commonInfo from "@/utils/common";
export default {
  data() {
    return {
      /* 判断立卷还是检索阶段 */
      dialogVisible: false,
      /* 显示分类名称 */
      templateTitle: "",
      xsyc: "",

      /* 表格数据 */
      tableData: [],
      //表格

      //分页
      pages: {
        per_page: 10,
        page: 1,
        keyword: "",
      },
      //表格页面
      pageSizeArr: JSON.parse(JSON.stringify(commonInfo.pageSizeArr)),
      current_page: 1,

      total: 0,
      isLoading: true,
      //分类蒙尘\
      project_id: "",
      /* 跳转页面获取id */
      template_id: "",
      /* 匹配分类模板蒙尘 */
      matdialogVisible: false,
      /* 匹配案卷组合蒙尘 */
      matdialogVisible2: false,
      /* 匹配分类模板表单 */
      matform: {
        id: "",
        template_id: "",
      },
      /* 匹配案卷组合表单 */
      matform2: {
        project_id: "",
        combination_id: "",
      },
      /* 匹配分类模板选择器数组 */
      matoptions: [],
      /* 匹配案卷组合选择器数组 */
      matoptions2: [],
      /* 判断是按分类还是按参建单位 */
      ChoicedialogVisible: false,

      /* 是否禁用 */
      isDisabled: true,
      /* 判断 */
      isSupertube: "",
      //编辑
      //编辑蒙尘
      dialogFormVisible: false,
      /* 编辑表单 */
      editForm: {
        title: "",
        document_number: "",
      },
      formLabelWidth: "20%",
    };
  },

  methods: {
    /* 匹配分类模板改变 */
    async getPreparationForm() {
      let res = await classifyTemplates();
      console.log(res, "111");
      this.matoptions = res.data.data.data;
    },
    /* 匹配案卷组合改变 */
    async getPreparationForm2() {
      let res = await Getselects();
      console.log(res, "111");
      console.log(1);
      this.matoptions2 = res.data.data;
    },
    /* 获取当前表格信息 */
    async loadData(num) {
      let res = await projects(num);
      console.log(res, "12");
      this.tableData = res.data.data.data;
      this.total = res.data.data.total;
      this.current_page = res.data.data.current_page;
      this.isLoading = false;
    },
    INput() {
      if (this.pages.keyword == "") {
        this.loadData();
      }
    },
    //搜索
    async goSearch() {
      this.pages.page = 1;
      this.pages.per_page = 10;
      this.current_page = 1;
      console.log(this.pages);
      if (this.pages.keyword == "") {
        this.$message.warning("查询条件不能为空！");
        return;
      }
      let res = await projects(this.pages);
      console.log(res, "123");
      this.tableData = res.data.data.data;
      this.total = res.data.data.total;
      this.current_page = res.data.data.current_page;
    },

    //提交分类
    SubmitBtn(formName) {
      console.log(this.matform);
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await classTemplate(this.matform);
          //console.log(res);
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.$refs[formName].resetFields();
            this.matdialogVisible = false;
            this.loadData();
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        }
      });
    },
    //提交案卷组合
    SubmitBtn2(formName) {
      console.log(this.matform2);
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await relateCombination(this.matform2);
          //console.log(res);
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.$refs[formName].resetFields();
            this.matdialogVisible2 = false;
            this.loadData();
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        }
      });
    },
    //编辑
    async showEdit(id) {
      this.Id = id;
      let res = await seeProjects({ id });
      console.log(res);
      this.editForm.title = res.data.data.title;
      this.editForm.document_number = res.data.data.document_number;
      /* this.editForm.template_id = res.data.data.template_id; */
      this.editForm.id = res.data.data.id;
      this.dialogFormVisible = true;
    },
    //删除
    deleteRow(id) {
      this.$confirm("确认删除？").then(async () => {
        let res = await delProjects(id);
        //console.log(res);
        if (res.data.code === 200) {
          this.$message({
            showClose: true,
            duration: 3000,
            message: res.data.msg,
            type: "success",
          });
          this.loadData();
        } else {
          this.$message({
            showClose: true,
            duration: 3000,
            message: res.data.msg,
            type: "error",
          });
        }
      });
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //多选删除
    deleteSelectItem() {
      if (this.multipleSelection == null) {
        this.$message({
          showClose: true,
          duration: 3000,
          message: "请先选中要删除的数据哦！ 亲",
          type: "error",
        });
      } else {
        this.$confirm("确认删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          let arr = this.multipleSelection.map((item) => item.id);
          let ids = arr.join(",");
          let res = await delProjectsMore({ ids });
          // console.log(res);
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.loadData();
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        });
      }
    },
    //编辑成功
    editModify(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await editProjects(this.editForm);
          //console.log(res);
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.loadData();
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        }
        this.dialogFormVisible = false;
      });
    },
    //点击显示分类蒙尘
    mathandleClick(row) {
      console.log(row);
      this.matdialogVisible = true;
      this.matform.id = row.id;
      this.templateTitle = row.title;
      sessionStorage.setItem("templateTitle", row.title);
    },
    //点击显示案卷模板组件蒙尘
    mathandleClick2(row) {
      console.log(row);
      this.matdialogVisible2 = true;
      this.matform2.project_id = row.id;
    },
    //分页
    handleCurrentChange(val) {
      this.current_page = val;
      this.pages.page = val;
      this.loadData(this.pages);
    },
    //分页
    handleSizeChange(val) {
      this.pages.per_page = val;
      this.loadData(this.pages);
    },
    //跳转
    goFiling() {
      this.$router.push({
        path: "/project/template-item/filing",
        query: {
          id: this.project_id,
          template_id: this.template_id,
        },
      });
      this.dialogVisible = false;
    },
    /* 点击检索显示分类还是参建单位 */
    goOther() {
      this.ChoicedialogVisible = true;
    },
    /* 跳转到参建单位 */
    goMatching() {
      this.$router.push({
        path: "/project/template-item/filing/matching",
        query: {
          id: this.project_id,
          template_id: this.template_id,
        },
      });
    },
    /* 跳转到分类 */
    goConstruction() {
      this.$router.push({
        path: "/project/template-item/retrieval",
        query: {
          id: this.project_id,
          template_id: this.template_id,
        },
      });
    },

    //点击显示蒙尘
    async handleClick(row) {
      console.log(row);
      this.project_id = row.id;
      this.template_id = row.template_id;
      let id = row.id;
      console.log(row.classify_template);

      if (!row.combination) {
        this.$message({
          showClose: true,
          duration: 3000,
          message: "请选择匹配案卷组合",
          type: "warning",
        });
        this.dialogVisible = false;
      } else if (row.classify_template == null) {
        this.$message({
          showClose: true,
          duration: 3000,
          message: "请选择匹配分类",
          type: "warning",
        });
        this.dialogVisible = false;
      } else {
        sessionStorage.setItem("type", row.combination.title);
        this.dialogVisible = true;
      }

      let res = await setProjectId({ id });
      console.log(res);
    },
  },
  created() {
    this.loadData();
    this.getPreparationForm();
    this.getPreparationForm2();
    this.isSupertube = sessionStorage.getItem("isSupertube");
  },
  /*  mounted: function () {
    this.loadData();
    this.getPreparationForm();
    this.getPreparationForm2();
  }, */
};
</script>

<style scoped lang="less">
.itemList {
  width: 100%;
  height: 100%;
}
/deep/.el-table__header {
  margin-bottom: 20px;
}
/deep/.el-table {
  background-color: #f3f5fb;
}
/deep/.el-table .cell {
  display: flex;
}
/deep/.el-button--mini {
  font-size: 18px !important;
  padding: 7px 5px;
}
.dialogBox {
  margin: 0 auto;
  text-align: center;
  padding: 0 30px;

  .title {
    font-size: 24px;
    font-weight: 500;
    color: #212121;
    opacity: 1;
    margin-bottom: 48px;
  }

  .select {
    display: flex;
    justify-content: space-between;
    & > div {
      cursor: pointer;
    }
    .person {
      .icon {
        background: #ffffff !important;
      }
    }

    .icon {
      width: 140px;
      height: 140px;
      background: #e0e6fc;
      border: 2px solid #e0e6fc;
      border-radius: 50%;
      opacity: 1;
      display: flex;
      justify-content: center;
      align-items: center;

      .iconfont {
        font-size: 100px;
        color: #3963fd;
        width: 94px;
        height: 94px;
      }
    }
    .name {
      font-size: 16px;
      font-weight: 400;
      color: #000000;
      opacity: 1;
      padding: 18px 0 12px;
    }
  }
}
.dialogBox2 {
  margin: 0 auto;
  text-align: center;
  padding: 0 30px;

  .title {
    font-size: 18px;
    font-weight: 500;
    color: #212121;
    opacity: 1;
    margin-bottom: 48px;
  }
  .select {
    display: flex;
    justify-content: space-between;
    & > div {
      cursor: pointer;
    }
    .person {
      .icon {
        background: #ffffff !important;
      }
    }

    .icon {
      width: 100px;
      height: 100px;
      background: #e0e6fc;
      border: 2px solid #e0e6fc;
      border-radius: 25%;
      opacity: 1;
      display: flex;
      justify-content: center;
      align-items: center;

      .el-icon-folder {
        font-size: 60px;
        color: #3963fd;
        width: 55%;
        height: 55%;
      }
      .el-icon-folder-opened {
        font-size: 60px;
        color: #3963fd;
        width: 55%;
        height: 55%;
      }
    }
    .name {
      font-size: 16px;
      font-weight: 400;
      color: #000000;
      opacity: 1;
      padding: 18px 0 12px;
    }
  }
}
.commontop .el-input {
  width: 20%;
  background-color: #fff;
}
</style>